<template>
  <div class="login">
    <!-- logo图片 -->
    <Logo />
    <van-cell-group class="word">
      <van-field v-model="username" label="用户名" placeholder="请输入用户名" />
      <van-field
        v-model="password"
        type="password"
        label="密码"
        placeholder="请输入密码"
      />
    </van-cell-group>
    <van-button type="danger" class="btn" @click="Login">登录</van-button>
    <div class="tips" @click="goRegister">没有账号去注册</div>
  </div>
</template>

<script setup  name="login">
import Logo from "@/components/Logo.vue";
import { loginInfo } from "@/api/user.js";
import { encryptO } from "@/utils/crypto.js";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
let username = ref("");
let password = ref("");
let router = useRouter();
function Login() {
  let newWord = encryptO(password.value);
  loginInfo({
    userName: username.value,
    passWord: newWord,
  })
    .then((res) => {
      console.log(res, "loginInfo");
      console.log(sessionStorage.getItem("token"));
      if (res.accessToken) {
        sessionStorage.setItem("token", res.accessToken);
        router.push("/home");
      }
    })
    .catch((err) => {
      console.error("Login failed", err);
    });
}
function goRegister() {
  router.push("/register");
}
</script>
<style lang="scss" scoped>
.login {
  width: 100vw;
  .word {
    width: 80%;
    margin-top: -100px;
    margin-left: 113px;
  }
  .btn {
    width: 66%;
    margin-left: 25%;
    margin-top: 30px;
  }
  .tips {
    color: purple;
    margin-left: 45%;
    margin-top: 40px;
  }
}
</style>
